<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>22 - 事件对象参数</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>

    <script>

        // 事件对象参数     事件对象参数本质上就是事件中的一个参数





        // 1. 通过事件对象参数获取鼠标位置

        let div = document.querySelector('div');
        // 必须给元素注册对应的事件
        div.addEventListener('click', function(e) {    // e 就是事件对象参数
            // 语法:
            // ☛   事件对象参数.clientX        横坐标, 参照整个页面左上角计算的
            // ☛   事件对象参数.clientY        纵坐标, 参照整个页面左上角计算的

            // ☛   事件对象参数.offsetX        横坐标, 参照当前事件源左上角
            // ☛   事件对象参数.offsetY        纵坐标, 参照当前事件源左上角

            // ☛   事件对象参数.pageX          横坐标, 参照整个页面左上角
            // ☛   事件对象参数.pageY          纵坐标, 参照整个页面左上角

            // ☛   事件对象参数.screenX        横坐标, 参照整个电脑屏幕左上角
            // ☛   事件对象参数.screenY        纵坐标, 参照整个电脑屏幕左上角
        });





        // 2. 通过事件对象参数获取按键      用户按了键盘中的哪个键

        let body = document.querySelector('body');
        body.addEventListener('keydown', function(e){
            // e 就是事件对象参数
            console.log(e);

            // 获取键盘按键信息: 
            // 语法:
            // ☛   事件对象参数.key    (推荐使用key)
            // ☛   事件对象参数.code
        });

        



        // 通过事件对象参数阻止冒泡     阻止事件冒泡
        // 语法:
        // ☛   事件对象参数.stopPropagation();

        // 通过事件对象参数阻止标签的默认跳转
        //      超链接a标签:  发生页面跳转
        //      表单提交按钮: 提交表单数据的时候,也会跳转页面
        // 语法:
        // ☛   事件对象参数.preventDefault();



    </script>
</body>
</html>